<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <%--导入js文件--%>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<fieldset>
    <h4>方法返回值String, 参数为 Model类型</h4>
    <a href="${pageContext.request.contextPath}/default/gotoResultModel.do">测试</a>
</fieldset>
<fieldset>
    <h4>方法返回值String, 参数为 ModelMap类型</h4>
    <a href="http://localhost:8080/default/gotoResultModelMap.do?id=1">测试</a>
</fieldset>
<fieldset>
    <h4>方法返回值String, 使用SpringMVC的 重定向进行跳转页面</h4>
    <a href="http://localhost:8080/default/gotoResultRedirect.do">测试</a>
</fieldset>
<fieldset>
    <h4>方法返回值String, 使用SpringMVC的 转发进行跳转页面</h4>
    <a href="http://localhost:8080/default/gotoResultForward.do">测试</a>
</fieldset>
<fieldset id="app">
    <button @click="clickMe()">Post点击获取数据</button>
    <button @click="getMethod()">Get点击获取数据</button>
    <%--<div>{{ userList }}</div>--%>
    <ul>
        <li v-for="(item, index) in userList">
            {{item.id}} + {{item.username}} + {{item.sex}}
        </li>
    </ul>
</fieldset>
</body>
<script>
    <!-- 创建一个Vue对象 -->
    new Vue({
        el: '#app',
        data: {
            userList: [],
            fuck: ""

        },
        methods: {
            clickMe: function () {
                var params = {id: 1, username: '你好', sex: '男'};
                axios.post("/ajax/testAjax.do", params)
                    .then(response => {
                        this.userList = response.data;
                    }).catch(error => {//失败
                    console.dir(error);
                });
            },
            getMethod: function () {
                axios.get("/ajax/getAjax.do?id=1&username=xxx&sex=男")
                    .then(res => {
                        console.log(res.data);
                    }).catch(err => {
                        console.log(err);
                    })
            }
        }
    })
</script>
</html>
